<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head >     
        <title>Register</title>
        <link href="css/meteocal.css" rel="stylesheet" type="text/css"/>
    </h:head>
    <body class="noFrame">      
        <!--Element of the first line on the top bar-->
        <div id="topHeader">

            <img src="Images/meteocalsnow.png" id="logo" name="meteocalLogo" title="meteocallogo"/>

            <div class="loginForm"> 
                <span>Username</span>
                <span id="passwordLabel">Password</span>

                <h:form> 
                    <p:inputText id="username" value="#{loginBean.username}" required="true"/>
                    <p:password  id="password" value="#{loginBean.password}" required="true"/>
                    <p:commandButton value="Login" action="#{loginBean.login()}"   />

                    <p:dialog header="Error" widgetVar="loginFailed" minHeight="40" resizable="false" >
                        <h:outputText value="Login failed: username or passoword not recognized." />
                    </p:dialog>
                </h:form>
            </div>
        </div>

        <div id="LeftHeader">
            <ul class="buttonList">
                <li><p:button class="leftBarButton" value="Home" outcome="index"/></li>
                <li><p:button class="leftBarButton" value="Register" outcome="register"/></li>
                <li><p:button class="leftBarButton" value="Contacts" outcome="contacts"/></li>
                <li><p:button class="leftBarButton" value="AboutUs" outcome="aboutUs"/></li>
            </ul>
        </div>

        <h:form >
            <div class="guestFrame">
                <p:messages closable="true" showIcon="false" style="width:85%;" autoUpdate="true"/>
                
                <p:panelGrid columns="2" class="register"  >
                    <f:facet name="header">
                        Registration Form
                    </f:facet>


                    <p:outputLabel for="name" value="Name:" />                   
                    <p:inputText id="name" value="#{registrationController.user.username}" required="true" label="Name">
                        <f:validateRegex pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$"/>
                    </p:inputText>

                    <p:outputLabel for="pwd1" value="Password 1:" />                   
                    <p:password id="pwd1" value="#{registrationController.user.password}" match="pwd2" label="Password 1" required="true" feedback="true">
                        <f:validateLength minimum="5"/>
                    </p:password>

                    <p:outputLabel for="pwd2" value="Password 2:" />
                    <p:password id="pwd2" value="#{registrationController.user.password}" label="Password 2" required="true" />

                    <h:outputLabel for="email" value="Email:"/>                   
                    <p:inputText id="email" value="#{registrationController.user.email}" required="true">
                        <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                    </p:inputText>

                    <p:outputLabel for="privacy" value="Privacy:" />
                    <p:selectOneRadio id="privacy" value="#{registrationController.calendar.privacy}" required="true" >
                        <f:selectItem itemLabel="Private" itemValue="PRIVATE"  />
                        <f:selectItem itemLabel="Shared" itemValue="SHARED" />
                        <f:selectItem itemLabel="Public" itemValue="PUBLIC" />
                    </p:selectOneRadio>
                    
                    <p:column/>
                    <p:column colspan="50">
                        <p:commandButton value="Register" ajax="true" action="#{registrationController.register()}" validateClient="true"  style="margin-right:10px" />
                    </p:column>
                </p:panelGrid>
           
            </div>
            <p:dialog header="Error" widgetVar="usernameError" minHeight="40" resizable="false" >
                <h:outputText value="Username Already used." />
            </p:dialog>

            <p:dialog header="Error" widgetVar="emailError" minHeight="40" resizable="false" >
                <h:outputText value="E-Mail Already used." />
            </p:dialog>
        </h:form>

    </body>
</html>

